<template>
  <div
    class="tab-container waybill-tab-container tab-fixed"
    v-loading.fullscreen.lock="fullscreenLoading"
  >
    <el-card>
      <el-row :gutter="6">
        <span>合单分配文件</span>
      </el-row>
    </el-card>
    <el-card>
      <el-row :gutter="6">
        <el-form
          ref="orderForm"
          :model="orderData"
          :rules="rules"
          size="mini"
          label-width="60px"
        >
          <el-col :span="3">
            <el-form-item label="运单号" prop="waybillNos">
              <el-input
                v-model="orderData.waybillNos"
                type="textarea"
                placeholder="请输入运单号"
                :autosize="{ minRows: 1, maxRows: 6 }"
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="渠道" prop="inStockChannel">
              <el-select
                v-model="orderData.inStockChannel"
                placeholder="请选择下拉选择渠道"
                multiple
                clearable
                filterable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(k, v) in inStockChannelOptions"
                  :key="v"
                  :label="inStockChannelOptions[v]"
                  :value="parseInt(v)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="仓库代码" prop="dispatchAddressCode">
              <el-input
                v-model="orderData.dispatchAddressCode"
                placeholder="请输入仓库代码"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="2">
            <el-form-item label="">
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="toAllocationFile"
              >
                搜索
              </el-button>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item label="">
              <el-button type="primary" size="mini" @click="reset">
                重置
              </el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </el-card>
    <el-card>
      <el-row :gutter="2">
        <el-form
          ref="remarkForm"
          :model="remarkData"
          :rules="rules"
          size="mini"
          label-width="10px"
        >
          <el-col :span="2">
            <el-form-item label="" prop="field105">
              <el-button type="primary" size="mini" @click="allocationTrace">
                分配文件</el-button
              >
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="" prop="fileName">
              <span>{{ remarkData.fileName }}</span>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </el-card>

    <el-card>
      <el-table
        :data="tableData"
        size="mini"
        stripe
        style="width: 100%"
        @selection-change="selectL"
      >
        <el-table-column
          type="selection"
          width="44"
          align="center"
        ></el-table-column>
        <ex-table-column
          prop="waybillNo"
          label="运单号"
          :auto-fit="true"
          :fit-header="true"
        >
        </ex-table-column>
        <ex-table-column
          prop="referenceNo"
          label="参考号"
          :auto-fit="true"
          :fit-header="true"
        >
        </ex-table-column>

        <ex-table-column
          prop="masterNumber"
          label="主单号"
          :auto-fit="true"
          :fit-header="true"
        >
        </ex-table-column>

        <ex-table-column
          prop="waybillMergeId"
          label="合单号"
          :auto-fit="true"
          :fit-header="true"
        >
        </ex-table-column>
        <ex-table-column prop="inStockTotalPackages" label="件数">
        </ex-table-column>
        <ex-table-column
          prop="inStockChannel"
          label="渠道"
          :auto-fit="true"
          :fit-header="true"
        >
          <template slot-scope="scope">
            {{ inStockChannelOptions[scope.row.inStockChannel] }}
          </template>
        </ex-table-column>
        <ex-table-column
          prop="customerId"
          label="客户"
          :auto-fit="true"
          :fit-header="true"
        >
          <template slot-scope="scope">
            {{ customerOptions[scope.row.customerId] }}
          </template>
        </ex-table-column>
        <ex-table-column
          prop="salesmanId"
          label="销售"
          :auto-fit="true"
          :fit-header="true"
        >
          <template slot-scope="scope">
            {{ userOptions[scope.row.salesmanId] }}
          </template>
        </ex-table-column>
        <ex-table-column
          prop="servicesId"
          label="客服"
          :auto-fit="true"
          :fit-header="true"
        >
          <template slot-scope="scope">
            {{ userOptions[scope.row.servicesId] }}
          </template>
        </ex-table-column>
        <ex-table-column
          prop="dispatchAddressCode"
          label="仓库代码"
          :auto-fit="true"
          :fit-header="true"
        >
        </ex-table-column>
        <ex-table-column prop="remark" label="备注">
          <template slot-scope="scope">
            <el-input
              size="small"
              v-model="scope.row.remark"
              v-show="scope.row.id"
              placeholder="请输入内容"
            ></el-input>
          </template>
        </ex-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
import { ajax } from "@/store/yg/common/utils";
import * as constant from "@/store/yg/common/constant";
import axios from "axios";
import { m } from "@/store/yg/common/local";

export default {
  props: [],
  data() {
    return {
      rules: {},
      statuData: "",
      shippingWay: "",
      fullscreenLoading: false,
      userOptions: {},
      inStockChannelOptions: {},
      customerOptions: {},
      statusOptions: {},
      tableData: [
        {
          id: "",
          waybillNo: "",
          referenceNo: "",
          masterNumber: "",
          waybillMergeId: "",
          waybillSingleId: "",
          inStockTotalPackages: "",
          trackNumber: "",
          inStockChannel: "",
          customerId: "",
          salesmanId: "",
          servicesId: "",
          dispatchAddressCode: "",
          status: "",
          remark: "",
          statustime: ""
        }
      ],
      orderData: {
        waybillId: 0,
        inStockChannel: [],
        dispatchAddressCode: "",
        fileId: "",
        waybillNos: ""
      },
      remarkData: {
        fileName: ""
      },
      listSelect: [],
      listSelectId: [],
      synTraceOptions: [
        {
          label: "是",
          value: 1
        },
        {
          label: "否",
          value: 0
        }
      ]
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.remarkData.fileName = this.$route.query.fileName;
    this.orderData.waybillId = this.$route.query.waybillId;
    this.orderData.fileId = this.$route.query.fileId;
    this.toAllocationFile();
  },
  methods: {
    m(key) {
      return m(key);
    },

    allocationTrace() {
      if (!this.listSelect.length > 0) {
        this.$message.error("请先选择子单数据！");
        return;
      }
      if (!this.orderData.waybillId) {
        this.$message.error("请先选择子单数据！");
        return;
      }
      this.fullscreenLoading = true;
      var param = {};
      var remarkMap = {};
      this.listSelect.forEach(element => {
        if (element.remark) {
          remarkMap[element.id] = element.remark;
        } else {
          remarkMap[element.id] = "";
        }
      });
      param["waybillId"] = this.$route.query.waybillId;
      param["fileId"] = this.$route.query.fileId;
      param["shippingWay"] = this.shippingWay;
      param["allocationFile"] = remarkMap;
      ajax("allocationFile", param).then(
        res => {
          this.fullscreenLoading = false;
          if (res.code == 200) {
            this.$message.success("分配成功!");
          } else {
            if (null != res.message) {
              this.$message.error(m(res.message));
            } else {
              this.$message.error("分配失败!");
            }
          }
        },
        error => {
          console.log(error);
        }
      );
    },
    selectL(selection, row) {
      this.listSelect = selection;
      this.listSelectId = selection.map(item => item.id);
    },
    toAllocationFile() {
      this.fullscreenLoading = true;
      ajax("toAllocationFile", this.orderData).then(
        res => {
          this.fullscreenLoading = false;
          if (res.code == 200) {
            this.inStockChannelOptions = res.data["channelMap"];
            this.tableData = res.data["simpleWaybillQueries"];
            this.userOptions = res.data["userMap"];
            this.customerOptions = res.data["customerMap"];
            this.shippingWay = res.data["shippingWay"];
          }
        },
        error => {
          console.log(error);
        }
      );
    },
    reset() {
      this.orderData = {};
    }
  }
};
</script>
<style lang="scss" scoped>
.title-icon {
  display: inline-block;
  width: 120px;
}
</style>

<style scoped>
/deep/ .el-tabs__item.is-disabled {
  color: #51abd1;
}
</style>
